<template>
    <tm-overlay bgColor="rgba(0,0,0,0)" v-model:show="visible" contentAnimation>
        <view @click.stop="">
            <view class="modal-content">
                <image @click="visible = false" class="close-image" :src="modal_close_image" mode="widthFix"></image>
                <view class="content">
                    <image class="bg" :src="wish_bg_image" mode="scaleToFill"></image>
                    <view class="text">
                        <template v-if="readonly">
                            <view :style="{
                                height: inputHeight + 'rpx',
                                overflow: 'scroll',
                            }">
                                <tm-text :font-size="36" color="#987241" :label="wishContent"></tm-text>
                            </view>    
                        </template>
                        <template v-else>
                            <tm-input v-model="wishContent" placeholderStyle="color:#987241" transprent :height="inputHeight"
                                :inputPadding="[12]" placeholder="请输入..." confirm-hold confirm-type="换行" showCharNumber
                                :maxlength="300" :border="0" color="grey-5" type="textarea"></tm-input>
                            <ImageButton @click="submit" v-if="!readonly" :image="vip_btn_image">
                                <tm-text :font-size="32" color="#FFECB8" label="提交心愿"></tm-text>
                            </ImageButton>
                        </template>
                    </view>
                </view>
            </view>
        </view>
    </tm-overlay>
</template>
<script setup lang="ts">
import { defineProps, ref, watch, computed } from 'vue'
import { useWindowInfo } from "/hooks/useWindowInfo.ts";
import modal_close_image from '/static/assets/images/common/modal-close.png'
import wish_bg_image from "/static/assets/images/blessings/wish.png";
import vip_btn_image from '/static/assets/images/index/btn-vip.png'
import ImageButton from '@/components/ImageButton/index.vue'
import { useWishStore } from '@/stores/wish'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    readonly: {
        type: Boolean,
        default: false
    },
    wish: {
        type: Object,
        default: () => ({})
    }
})

const { windowHeight } = useWindowInfo();

const emit = defineEmits(['update:show'])

const visible = ref(props.show)
const wishContent = ref('')
const wishStore = useWishStore()

const inputHeight = computed(() => {
    if (props.readonly) return windowHeight * 0.5 + 110;
    return windowHeight * 0.5;
})

const submit = async () => {
    if (wishContent.value.trim() === '') {
        uni.showToast({ title: '请输入您的心愿', icon: 'none' });
        return
    };
    await wishStore.add({
        wishContent: wishContent.value
    });
    visible.value = false;
}

watch(() => props.show, (newVal) => {
    visible.value = newVal
})

watch(() => visible.value, (newVal) => {
    if (newVal) {
        wishContent.value = props.wish?.wishContent || '';
    }
    else {
        wishContent.value = '';
    }
    emit('update:show', newVal)
})
</script>
<style lang="less" scoped>
.modal-content {
    width: 750rpx;
    height: 100vh;
    position: relative;
    z-index: 0;

    .close-image {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        left: 50%;
        transform: translateX(-50%);
        bottom: 18%;
        z-index: 2;
    }

    .bg {
        position: absolute;
        z-index: -1;
        top: 0;
        width: 750rpx;
        height: 100vh
    }

    .text {
        position: absolute;
        width: 75%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30%;
    }

    .image-button {
        width: 290rpx;
        height: 80rpx;
        margin: 30rpx auto 0;
    }
}
</style>